<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ajax(options) {
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Constent-Type': 'application/x-www-form-urlencoded'
                }
            };
            //使用options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults, options);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数的变量
            var params = '';
            for (var attr in defaults.data) {
                params += attr + '=' + defaults.data[attr] + '&';
            }
            //将参数最后面的&除掉
            params = params.substr(0, params.length - 1);
            //判断请求方式
            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }
            //配置ajax对象
            xhr.open(defaults.type, defaults.url);
            //如果请求方式为post
            if (defaults.type == 'post') {
                //用户希望的向服务器端传递的请求参数的类型
                var contentType = defaults.header['Content-Type']
                    //设置请求参数格式的类型
                xhr.setRequestHeader('Constent-Type', contentType);
                if (contentType == 'application/json') {
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    xhr.send(params);
                }

            } else {
                //发送请求
                xhr.send();
            }


            //监听xhr对象下面的onload事件
            //当xhr对象接收响应数据后触发
            xhr.onload = function() {
                //获取响应头中的数据
                var contenType = xhr.getResponseHeader('Content-Type');
                //服务器端返回的数据
                var responseText = xhr.responseText;
                if (contenType.includes('application/json')) {
                    //将json字符串转换为json对象
                    responseText = JSON.parse(responseText)
                }
                //当http状态码等于200的时候
                if (xhr.status == 200) {
                    //请求成功调用处理成功情况的函数
                    defaults.success(responseText, xhr);
                } else {
                    //请求失败调用处理失败情况的函数
                    defaults.error(responseText, xhr);
                }

            }
        }
        ajax({
            //请求地址
            url: 'http://localhost:3000/responseDate',
            success: function(data) {
                console.log(data);
            }
        })
    </script>
</body>

</html>